import React from 'react';
import type { PayrollRecord, Employee } from '../types';

interface PayrollManagerProps {
  payroll: PayrollRecord[];
  employees: Employee[];
}

const PayrollManager: React.FC<PayrollManagerProps> = ({ payroll, employees }) => {
  const getEmployeeName = (id: number) => {
    return employees.find(e => e.id === id)?.name || '未知';
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-3xl font-bold text-slate-800">工资管理</h2>
        <button className="bg-green-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-700 transition-colors">
          发放工资
        </button>
      </div>

      <div className="bg-white p-6 rounded-xl shadow-md">
        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left text-slate-500">
            <thead className="text-xs text-slate-700 uppercase bg-slate-50">
              <tr>
                <th scope="col" className="px-6 py-3">员工</th>
                <th scope="col" className="px-6 py-3">薪资周期</th>
                <th scope="col" className="px-6 py-3 text-right">基本工资</th>
                <th scope="col" className="px-6 py-3 text-right">奖金</th>
                <th scope="col" className="px-6 py-3 text-right">扣款</th>
                <th scope="col" className="px-6 py-3 text-right">实发工资</th>
              </tr>
            </thead>
            <tbody>
              {payroll.map(record => (
                <tr key={record.id} className="bg-white border-b hover:bg-slate-50">
                  <td className="px-6 py-4 font-medium text-slate-900">{getEmployeeName(record.employeeId)}</td>
                  <td className="px-6 py-4">{record.payPeriod}</td>
                  <td className="px-6 py-4 text-right">¥{record.baseSalary.toLocaleString()}</td>
                  <td className="px-6 py-4 text-right text-green-600">+¥{record.bonus.toLocaleString()}</td>
                  <td className="px-6 py-4 text-right text-red-600">-¥{record.deductions.toLocaleString()}</td>
                  <td className="px-6 py-4 text-right font-bold text-slate-800">¥{record.netPay.toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default PayrollManager;
